<template>

  <div class="self-clip-cropper">
    <div id="demo">
      <img id="image" :src="url" alt="Picture">
    </div>
    <!--<div>
            <button type="button" id="button" @click="crop"  class="save-btn-two">确定</button>
            <div class="show">
                <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
                </div>
            </div>
            <div>
                <input type="file" id="change" accept="image" @change="change">
                <label for="change"></label>
            </div>
        </div>-->
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex';
  import Cropper from 'cropperjs'
  import util from '../lib/util'

  export default {
    components: {},
    data() {
      return {
        headerImage: '',
        picValue: '',
        cropper: '',
        croppable: false,
        panel: false,
        url: '',
        isShow: false,
        image2Show: false,
        imageWidth: 500,
        imageHeight: 300
      }
    },
    mounted() {

      //初始化这个裁剪框
      var self = this;
      var image = document.getElementById('image');
      this.cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        viewMode: 1,
        guides: false,
        center: true,
        background: false,
        checkImageOrigin: false,
        zoomable: false,
        ready: function () {
          self.croppable = true;
        }
      });
    },
    watch: {
      chooseArticleImg() {
        if (!this.isfromAddimg) {
          let resetImg = new Image();
          var _that = this
          resetImg.onload = function() {
            _that.imageWidth = resetImg.naturalWidth;
            _that.imageHeight = resetImg.naturalHeight;
            if(_that.imageHeight >= _that.imageWidth) {
               _that.imageWidth = _that.imageWidth*500 / _that.imageHeight
                _that.imageHeight = 500
              // if (_that.imageHeight>500) {
              //   // 动态计算图片的宽度,高度固定300
              //   _that.imageWidth = _that.imageWidth*500 / _that.imageHeight
              //   _that.imageHeight = 500
              // }
            } else {
               _that.imageHeight = _that.imageHeight*500/_that.imageWidth
                // 动态计算图片的高度,宽度固定500
                _that.imageWidth = 500
              // if (_that.imageWidth>500) {
              //   _that.imageHeight = _that.imageHeight*500/_that.imageWidth
              //   // 动态计算图片的高度,宽度固定500
              //   _that.imageWidth = 500
              // }
            }
            _that.imageWidth = parseInt(_that.imageWidth)
            _that.imageHeight = parseInt(_that.imageHeight)
            let url = `${_that.chooseArticleImg.url}?x-oss-process=image/resize,m_fixed,h_${_that.imageHeight},w_${_that.imageWidth}&time=${new Date().getTime()}`
            _that.url = url;
            _that.panel = true;
            //每次替换图片要重新得到新的url
            if (_that.cropper) {
              _that.cropper.replace(_that.url);
            }
            _that.panel = true;
          }
          resetImg.src = this.chooseArticleImg.url;
        }
      }
    },
    computed: {
      ...mapState([
        'articleLabelId',
        'folderId',
        //'id', // 文章id
        'articleDetail', //当前文章对象
        'showPreviewLayer',
        'showChooseImg',
        'chooseArticleImg',
        'isfromAddimg',
        'previewInfo'
      ]),
    },
    methods: {
      ...mapActions([
        'changeCropperState',
        'clearChoeseImg'
      ]),
			getObjectURL(file) {
				var url = null;
				if(window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if(window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}

				return url;
			},
			change(e) {
				let files = e.target.files || e.dataTransfer.files;
				if(!files.length) return;
				this.panel = true;
				this.picValue = files[0];
				//每次替换图片要重新得到新的url
				if(this.cropper) {
					this.cropper.replace(this.url);
				}
				this.panel = true;

			},
			crop() {
				this.panel = false;
				var croppedCanvas;
				var roundedCanvas;

				if(!this.croppable) {
					return;
				}



				// Crop
				croppedCanvas = this.cropper.getCroppedCanvas();

				// Round
				roundedCanvas = this.getRoundedCanvas(croppedCanvas);

				this.headerImage = croppedCanvas.toDataURL('image/jpeg',1);
				this.postImg(this.headerImage)

			},
			getRoundedCanvas(sourceCanvas) {

				var canvas = document.createElement('canvas');

				var context = canvas.getContext('2d');
				var width = sourceCanvas.width;
				var height = sourceCanvas.height;

				canvas.width = width;
				canvas.height = height;

				context.imageSmoothingEnabled = false;
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
				context.drawImage(sourceCanvas, 0, 0, width, height);
				context.globalCompositeOperation = 'destination-in';
				context.beginPath();
				context.fillRect(0 ,0 ,width,height);
//				context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
				context.fill();
				return canvas;
			},
			postImg(data) {
        //这边写图片的上传
        if(data) {
						this.$message({
							message: '裁切成功',
							type: '',
							center: true,
							customClass: 'self-tips-two',
						});
					}
					let param = {
						'imageValue': data,
						'type': 2
					}
					// 把base64图片上传上去
					util.ajax.post('/upload/base64Image', {
						...param
					}).then((res) => {
						// 获取裁剪完的图片
						return res
					}).then((re) => {
						// 获取图片
						// 还需传id, 若不传值, 默认是新建的文章, 后台自动创建
						if(!this.articleDetail.articleId) {
							return;
						}
						let paramsValue = {
						  //不要再传folderid和isDel了！！！！！！！ by tiansx
							//'folderId': this.folderId,
							'id': this.articleDetail.articleId || '',
							//              'origContent': this.previewInfo.editorHtml || '',
							//              'title': this.previewInfo.title || '',
							//'isDel': '0',
							'cover': re.data.uri
						}
						util.ajax.post(`/article/update`, {
							...paramsValue
						}).then((res) => {
							this.$message({
								message: '设置封面成功',
								type: '',
								center: true,
								customClass: 'self-tips-three',
              });

							// 设置封面成功后 关掉碳层
              this.changeCropperState(false);
              // 成功之后清除掉所选图片
              this.clearChoeseImg();
						});
					});
			}
		}
	}
</script>

<style>
  .self-clip-cropper {
    width: 500px;
    height: 500px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
  }

  #demo {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  #demo #button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: white;
  }

  #demo .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    /*border-radius: 50%;*/
    border: 1px solid #d5d5d5;
  }

  #demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #demo #image {
    max-width: 100%;
    height: auto !important;
    /*object-fit: cover;*/
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  /*.cropper-modal {
    opacity: .5;
    background-color: #000;
  }*/

  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {
    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {
    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f;
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('');
  }

  .cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }
</style>
